import { useLocation, useNavigate } from "@tanstack/react-router";
import { frontMenus } from "@/config/menu";

const NavBar = (props) => {
  const { resetPageData } = props;
  const navigate = useNavigate();
  const location = useLocation();
  const currentPath = location.pathname;
  return (
    <main className="h-[60px] bg-white shadow-[0_2px_8px_rgba(0,0,0,0.06)]">
      <section className="bg-white border-t-2 border-t-emerald-500 border-b">
        <div className="m-auto h-16 2xl:w-7xl flex items-center justify-between">
          <div className="flex items-center gap-6">
            {frontMenus.map((menu, index) => {
              const isActive = currentPath === menu.to;
              return (
                <div key={index} className="relative h-full flex items-center">
                  <span
                    onClick={(event) => {
                      // 阻止冒泡
                      event.stopPropagation();
                      resetPageData();
                      navigate({
                        to: menu.to,
                      });
                    }}
                    className={`z-10 px-1 py-2 text-base font-medium transition-colors cursor-pointer ${isActive ? "text-emerald-500" : "text-foreground hover:text-emerald-500"}`}
                  >
                    {menu.title}
                  </span>
                </div>
              );
            })}
          </div>
          {/* <UserDownMenu /> */}
        </div>
      </section>
    </main>
  );
};

export default NavBar;
